London | 26-SDC-MAR | Jamal Laqdiem | Sprint 2 | Chat App by jamallaqdiem · Pull Request #92 · CodeYourFuture/Module-Decomposition

jamallaqdiem · 2026-06-05T09:42:00Z

Self checklist

I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
My changes meet the requirements of the task
I have tested my changes
My changes follow the style guide

Changelist

Implementing the chat app using react typescript.

The app support additional features like:

added likes button
Added dislike button
Storing the likes and dislikes count
Persistent username

Urls to Coolify:
Client Url
Server Url

feat: init full-stack typescript workspace with tailwind v4

Feat: Implement initial message fetching API and layout UI.

feat: implement ChatInput component with POST fetch and auto-scroll UX

feat: implement real-time message sync using WebSocket protocol

…nd fix auto rendering bugs

feat: implement real-time likes and dislikes logic using websockets a…

…ayout badge

jamallaqdiem · 2026-06-05T09:43:32Z

Client Url
Server Url

cjyuan · 2026-06-06T10:28:26Z

The spec has this requirement:

It must also support at least one additional feature.

The Changelist section in the PR description would be the best place to include this info.

The PR description is also a better place to include the frontend and backend links because it would make finding all info in one place easier.

Can you also fix the Markdown syntax of the checkboxes in the PR description?

jamallaqdiem · 2026-06-06T14:11:55Z

@cjyuan Thanks for reviewing, I addressed the issues in the PR, could you have a look please?

cjyuan

Code could use some documentation (comments).

A useful rule of thumb is to ask yourself whether you could still explain or figure out how the code works few months from now. If the answer is uncertain, consider adding a comment to help future readers understand the intent and reasoning behind it.

I will review this PR in several rounds. Can you addressed the current feedback first?

jamallaqdiem · 2026-06-06T16:53:53Z

Code could use some documentation (comments).

A useful rule of thumb is to ask yourself whether you could still explain or figure out how the code works few months from now. If the answer is uncertain, consider adding a comment to help future readers understand the intent and reasoning behind it.

I will review this PR in several rounds. Can you addressed the current feedback first?

Thanks for reviewing, I will add the comments and address the feedbacks.

cjyuan

Changes look good and the code looks reasonably modular and organized. That said, I'm not very familiar with React, so I can't offer much guidance on React-specific best practices. You might get more useful feedback by asking an AI assistant.

Well done on exploring React and WebSocket technologies in your project. It's great to see you taking the initiative to learn and apply new concepts. Keep up the good work!

cjyuan · 2026-06-11T15:18:45Z

+const messages: Message[] = [
+  {
+    id: 1,
+    username: "Alice",


Consider keeping the mock data in a separate file and using a function to populate the initial storage. This approach would make the code easier to deploy and maintain in production.

cjyuan · 2026-06-11T15:30:06Z

+  const [alert, setAlert] = useState("");
+  const [messageType, setMessageType] = useState("");
+  const port = "https://backendchatapp.hosting.codeyourfuture.io/api";
+  const port2 = "wss://backendchatapp.hosting.codeyourfuture.io/api";


Suggestion: Look up

In an React app, where should app-specific configurable settings such as backend server domain be stored?

We could use a .env file to store these domains in the local developments, then use the env variable setting in the cloud provider.

jamallaqdiem added 15 commits May 15, 2026 21:28

feat: init full-stack typescript workspace with tailwind v4

9cb7064

Merge pull request #1 from jamallaqdiem/feat-setup-client-server

535c924

feat: init full-stack typescript workspace with tailwind v4

Feat: Implement initial message fetching API and layout UI.

0a8adf5

Merge pull request #3 from jamallaqdiem/feat-fetch-messages

4085d76

Feat: Implement initial message fetching API and layout UI.

feat: implement ChatInput component with POST fetch and auto-scroll UX

f7264da

Merge pull request #5 from jamallaqdiem/feat-create-roundtrip-messages

97779a6

feat: implement ChatInput component with POST fetch and auto-scroll UX

feat: implement real-time message sync using WebSocket protocol

51b64a9

Merge pull request #7 from jamallaqdiem/feat-websocket-realtime-sync

721357f

feat: implement real-time message sync using WebSocket protocol

feat: implement real-time likes and dislikes logic using websockets a…

c5959f1

…nd fix auto rendering bugs

Merge pull request #9 from jamallaqdiem/feat-real-time-reactions

bf24c91

feat: implement real-time likes and dislikes logic using websockets a…

persist username via localStorage and implement conditional profile l…

3f2804c

…ayout badge

Update the HTTP URL

a97a4a6

update the node version.

52e3fce

adding the missing comma

7df471a

Update API endpoints for chat application

9601f26

jamallaqdiem added Module-Decomposition The name of the module. 📅 Sprint 2 Assigned during Sprint 2 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jun 5, 2026

jamallaqdiem mentioned this pull request Jun 5, 2026

London | 26-SDC-MAR | Jamal Laqdiem| Sprint 2 | Chat App #88

Closed

cjyuan reviewed Jun 6, 2026

View reviewed changes

cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jun 6, 2026

Refactor: fix notifications and modularize components & styles,

786dc91

jamallaqdiem added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 9, 2026

This comment has been minimized.

Sign in to view

github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 9, 2026

jamallaqdiem added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 9, 2026

This comment has been minimized.

Sign in to view

github-actions Bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 9, 2026

Chore: remove accidental vscode settings from tracking

dd44ffb

jamallaqdiem added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jun 9, 2026

cjyuan reviewed Jun 11, 2026

View reviewed changes

Uh oh!

Conversation

jamallaqdiem commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelist

Uh oh!

jamallaqdiem commented Jun 5, 2026

Uh oh!

cjyuan commented Jun 6, 2026

Uh oh!

jamallaqdiem commented Jun 6, 2026

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jamallaqdiem commented Jun 6, 2026

Uh oh!

This comment has been minimized.

This comment has been minimized.

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 11, 2026

Choose a reason for hiding this comment

Uh oh!

jamallaqdiem Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jamallaqdiem commented Jun 5, 2026 •

edited

Loading